import React from 'react'
import styled from 'styled-components'

import Icon from '../Icon'
import Input from '../Input'
import Flex from '../Flex'

const IconInput = (props) => {
    const {
        children,
        type,
        placeholder,
        iconSrc,
        inputProps,
        ...restProps
    } = props
    return (
        <Container {...restProps}>
            <BaceIcon src={iconSrc} size={16} />
            <Input
                type={type}
                placeholder={placeholder}
                radius="true"
                {...inputProps}
                style={{height:'34px'}}
            />
            {children}
        </Container>
    )
}
const BaceIcon = styled(Icon)`
    position: absolute;
    top: 10px;
    left: 10px;
`
const Container = styled(Flex)`
    position: relative;
    padding-bottom: 20px;
    width: 100%;
`
export default IconInput



// WEBPACK FOOTER //
// ./src/components/IconInput/index.js